---
import GitHubIcon from "@components/icons/github";
import GithubStarButton from "./githubStarButton.astro";
import MobileNav from "./MobileNav";
---

<nav
  class="z-[1] flex p-[0.5%] xl:p-[1%] 2xl:p-[1.5%] text-white items-center justify-center w-full relative"
>
  <GithubStarButton />

  <div
    class="flex-row space-x-4 items-center justify-center hidden sm:flex sm:absolute right-4"
  >
    <a href="https://docs.createexpostack.com/" class="hover:no-underline"
      >Docs</a
    >
    <a
      target="_blank"
      rel="noreferrer noopener"
      href="https://github.com/danstepanov/create-expo-stack"
      ><GitHubIcon className="m-2 h-10 w-10" /></a
    >
  </div>

  <MobileNav client:load />

  <style>
    #github-link:hover {
      text-decoration: none !important;
    }
  </style>
</nav>
